<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <style type="text/css">
        body, div, ul, li, dl, dt, dd, h2, p {
            padding: 0;
            margin: 0;
            font-family: "微软雅黑";
        }

        ul {
            list-style: none;
        }

        img {
            border: none;
        }

        a {
            blr: expression(this.onFocus=this.blur());
            outline: none;
        }

        /* banner-box */
        .banner-box {
            min-width: 1210px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .banner-box .bd {
            width: 100% !important;
        }

        .banner-box .bd li .m-width {
            width: 1210px;
            margin: 0 auto;
            overflow: hidden;
        }

        .banner-box .bd li {
            width: 100% !important;
            height: 360px;
        }

        .banner-box .bd li a {
            display: block;
            background-size: auto;
        }

        .banner-btn {
            width: 1210px;
            position: absolute;
            top: 120px;
            left: 50%;
            margin-left: -605px;
        }

        .banner-btn a {
            display: block;
            width: 49px;
            height: 104px;
            position: absolute;
            top: 0;
            filter: alpha(opacity=40);
            -moz-opacity: 0.4;
            -khtml-opacity: 0.4;
            opacity: 0.4;
        }

        .banner-btn a.prev {
            left: 20px;
            background: url(img/foot.png) no-repeat 0 0;
        }

        .banner-btn a.next {
            right: 20px;
            background: url(img/foot.png) no-repeat -49px 0;
        }

        .banner-box .hd {
            position: absolute;
            top: 210px;
            left: 537px;
        }

        .banner-box .hd ul li {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            text-indent: -9999px;
            margin-right: 20px;
            background: #ccc;
            float: left;
            cursor: pointer;
        }

        .banner-box .hd ul li.on {
            background: #DA324D;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>

<body>
<div class="banner-box">
    <div class="bd">
        <ul>
            <li style="background:#F3E5D8;">
                <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img1.jpg"/></a>
                </div>
            </li>
            <li style="background:#B01415">
                <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img2.jpg"/></a>
                </div>
            </li>
            <li style="background:#C49803;">
                <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img3.jpg"/></a>
                </div>
            </li>
            <li style="background:#FDFDF5">
                <div class="m-width">
                    <a href="javascript:void(0);"><img src="img/img4.jpg"/></a>
                </div>
            </li>

        </ul>
    </div>
    <div class="banner-btn">
        <a class="prev" href="javascript:void(0);"></a>
        <a class="next" href="javascript:void(0);"></a>
        <div class="hd">
            <ul></ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {

        $(".prev,.next").hover(function () {
            $(this).stop(true, false).fadeTo("show", 0.9);
        }, function () {
            $(this).stop(true, false).fadeTo("show", 0.4);
        });

        $(".banner-box").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "fold",
            interTime: 3500,
            delayTime: 500,
            autoPlay: true,
            autoPage: true,
            trigger: "click"
        });

    });
</script>

</body>
</html>
